If you’d like to get in touch after reviewing the case study, here’s how:
Contact me |
Connect with me on Linkedin
Roger the designer's case study of
Knowledge CentralKnowledge Central (KC) is the internal Learning Management System (LMS) used by Competitive Capabilities International (CCI). KC is also the home of bespoke, online-only single-purpose tools.
In this case study we’ll focus on the design disciplines of user experience (UX) design, user interface (UI) design, and iconography design. We'll also focus on what challenges arose, and what lessons were learned from each of the disciplines while working on Knowledge Central.
I was the principal designer for KC for the duration of my time at CCI. Improvements were regularly done from 2014-2019.
If you’d like to get in touch after reviewing the case study, here’s how:
Contact me |
Connect with me on Linkedin
User experience design (UXD) is where I become the living, thinking bridge between your users and your product, aiming to simultaneously better meet the user’s and business goals.
I aim to understand what the stakeholder's expectation are for the system; I engage with your users and understand their world; after that, I work with the teams behind the system to create as much of a win-win situation as possible.
User: I'm new, where do I go, what do I do?
Direct new employees through induction.
I overhauled the look and feel of the existing commercial LMS's theme. I worked with the developer to ensure we didn't lose any of the functionality and rather enhanced it. I designed the user interface to focus on the learner’s needs by prioritising ease of navigation, a way to provide feedback, and the ability to identify which lessons the user had done and which lessons were still outstanding.
Click the images to enlarge them.
The Knowledge Central infographic distributed to new employees
User: Why should I care about extra company focused learning?
Encourage further learning.
I used a gamification technique that worked with the built-in LMS scoring system. I promoted two scoreboards - one measuring company-wide learning and another measuring each team’s learning. This led to competitive learning between teams and revealed stronger learners who could help weaker learners.
Please note: These images have been purposefully modified by distorting real people's names.
Click the images to enlarge them.
Note Your Points, Your Group's Point Leaders, and Overall Point Leaders.
User: Has the product been updated? Was there a press release? Any there any new employees?
Alert all users about major changes in the company or updates to the product.
I worked with the development team on an existing internal News platform. Sadly even after UI improvements and working on global communications campaigns the traction was still slow. As response I went on to create colorful banners that we began to use at the top of KC home page and this had more impact and improved traffic.
Note the top banner and the News section.
User Interface design (UID) is where I either fine-tune or overhaul your product’s interface, in order to remove friction for your users and prioritise your product’s useful features.
I aim to improve your interface bottlenecks in order to motivate and enable users to achieve their desired outcomes.
Managing two different environments in one interface - providing the correct context so that users can action their expected outcome.
Initially, I limited the UI to display only the two major options: Learn and Tools. That was too limiting and hid the variety of second-level features, which included induction and further learning (for Learn) and a variety of customised online tools (for Tools).
To address this, I changed the Learn and Tools buttons to tab-styled buttons near the top right on the page. I also created icons for each of the second-level features, and promoted them onto the landing page. This gave users the options to navigate quickly to their desired situation without having to perform unnecessary clicks.
Click the images to enlarge them.
Before
After
Dealing with text-heavy pages - avoiding the ‘wall of text’.
I worked with the developers to ensure a maximum of a 14-16 word count per line. I also worked with the learning designers to integrate information and visual design. We developed a strategy of breaking up text into cards (the white boxes) according to major learning concepts.
This strategy promotes scannability - enabling users to quickly find information - and gives readers a visual break. Finally, I was inspired by Google's Material design and used a light grey colour in the background in order to contrast the white text boxes where the text was going to be.
Click the images to enlarge them.
Before
After
Extracting meaningful feedback - getting user feedback is critical for making meaningful UX and UI modifications.
To motivate users to give feedback, I provided two levels of engagement. The first method enabled a user to rate the page to provide a quick indication of the quality of what they had just read.
The second method was a call to action, which asked the user to provide detailed feedback via a feedback form. Both engagement tools appeared at the end of the lesson, just before the user would navigate to start a new lesson.
Click the images to enlarge them.
Note the star rating and 'Give detailed feedback' button
Iconography design where I create a library of useful icons specifically for you, in order to improve your user's connection with your brand and product.
I aim to solve your visual language problems using symbols or icons that fit your brand.
Creating many icons using only the three brand colours.
Good branding stamps a recognisable identity onto your products, and good branding starts with a good use of your chosen colours. I take your brand colours and I illustrate with only those colours when creating your icons. The impact immediately links the icons to your brand, and presents a unified visual style no matter the context. This guideline can turn into a restriction when create many icons, using simple outlined-shapes or isometric grids can help. Another option is to use a related or auxiliary colour. Below are examples of two iconography styles used at the company - the external product style and the internal KC style.
Click the images to enlarge them.
The external product style only uses the three brand colours. This ensures the icons will connect with each other and other parts of the brand. I used brand grey as a foundation colour for the bulk of the icon and used the brand blue to emphasize specific aspects. I used the brand’s gold colour sparingly as it did not display clearly in lighter shades.
TRACC Portal
TRACC Reader
TRACC Maps
TRACC Workshops
Click the images to enlarge them.
The internal KC style only uses the six major colours - all related to the company’s brand blue. The grey and blue icons of the external style need to be contrasted when on KC, an internal-only platform. I used online colour tools to extract colours that had a complementary relationship with the brand blue. This way I could use reds, greens, yellows and oranges, but still remain connected to the parent brands colours.
Where to find it
Further Reading
Recognition Tool
Shared Learning
Avoid using commercial and pre-made stock icons.
Buying icons can improve turnaround time, but licensing can be expensive and your icons look like everyone else’s. Creating icons from scratch means that the company owns them, they are unique to that company, and work well with their existing branding. However, sometimes use of stock icons is unavoidable. To remain flexible, I aimed to modify any stock icons that had to be included by at least 60%. This can be done by either adding original illustration aspects to the stock image, or by disassembling the stock image beyond the point recognition. Below are examples of the few occasions where I mixed my iconography techniques with stock icons.
Click the images to enlarge them.
The ‘male and female business suit figures’ were used throughout the product. So when I was creating icons that required people I was obliged to continue using the figures. By following my iconography guidelines and colour standards I was able to combine stock and custom illustrations styles.
Find An Expert Tool
TRACC Community
Manage Team Progess
Create a consistent drawing style.
Icons change meaning depending on region and language, so it’s a great challenge to create a family of icons that will work for an international audience. The most important quality when creating a family of icons is that each icon has its own silhouette. That way, even if the icons doesn’t quite translate for the user, the silhouette allows the user’s brain to to mentally map the icon, improving the chance the user will recall the context of where the icon is being used.
In order to a create a pattern for illustrating silhouettes, I follow some guidelines that I set out for myself. I used isometric illustration for real-world objects, which I contrasted against a large, flat (two-dimensional) symbol. I used the same drawing grid to keep the ratio consistent. Finally, I used white line separators (in a width of 2 pixels or 4 pixels) where needed. These guidelines also enabled a consistent icon style across the different graphic creation teams.
Click the images to enlarge them.
Asset Care
Environment, Health and Safety
Health and Safety
Demand Planning
Portfolio and Lifecycle Management
Warehouse Management
AC(silhouette)
EHS(silhouette)
H&S (silhouette)
DP (silhouette)
PLM(silhouette)
WM (silhouette)
KC had two main functions - teaching users about the company and providing a central location for bespoke tools that didn’t fit anywhere else. This led to confusion for the users, including not knowing where to find specific information.
The solution came in the form of a dashboard-style home page. However, addressing user feedback about where to find everything was an ever-evolving task.
The requirements and challenges that KC presented, meant that I needed to develop a consistent UX and UI that incorporated ideas such as a visual information hierarchy, limiting and focusing interactive elements, and international interpretation of icons.
I reviewed Google analytics monthly to collect user entered search terms. I used that as evidence to support any suggested improvements we could make to the UX and the UI. We regularly added content to the home page to create the impression of living learning-system.
Roger took a commercial e-learning WordPress platform and evolved it in numerous ways from the ground up, improving on navigation, appearance, interface, and ways of incentivising users. He conceptualised several new custom tools that are used frequently by the company to meet users' needs, from HR processes to content support and training functions. His good nature means he can work effortlessly with a wide range of people from the least technical user to developers, acting as a translator between these. Roger tackles problems with a unique outlook that leads to solutions that no one else in the room would've conceived. All these traits all support his guiding principle: put the user first. Vaughan van Dyk (Lead Developer & Application Solutions Architect)
Working with Roger as part of a team, I was always impressed by his commitment to innovation and user-centric design, as well as his willingness to adapt and adjust to stakeholder requirements. Jacques van Heerden, instructional designer